<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>测试插件</title>
    <script src="lib/jquery/jquery-2.2.3.min.js"></script>
    <script src="./popup.js"></script>
    <style>
    .flex {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }
    .flex-vertical {
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .flex-horizontal {
        -webkit-box-orient: horizontal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -moz-box-orient: horizontal;
    }

    .flex-1 {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }
    .flex-center {
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        justify-content: center;
    }

    .flex-pack-justify {
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .flex-center-v {
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .lm-back {
        position: fixed !important;
        width: 360px;
        max-height: 600px;
        overflow-x: hidden;
        color: #3c3c3c;
        border: 1px solid #009875;
        -moz-box-shadow: 2px 2px 6px #009875;
        -webkit-box-shadow: 2px 2px 6px #009875;
        box-shadow: 2px 2px 6px #009875;
        top: 100px;
        right:0px;
        z-index: 99999999;
        background-color: white;
    }
    button {
        height: 30px;
        background-color: #009875;
        color: white;
        padding: 0 12px;
        border-radius: 4px;
        border: 0;
        cursor: pointer;
    }
    .lm-title {
        background-color: #009875;
        color: white;
        height: 30px;
        padding: 0 12px;
        width: 420px;
        cursor: move;
    }
    .sub-lm-title {
        color: #9c9c9c;
    }
    #login .input-back {
        width: 80%;
        margin-top: 12px;
        height: 30px;
    }
    #login .input-back input {
        margin-left: 12px;
        height: 30px;
    }
    .item {
        margin-top: 12px;
    }
    .lm-tip {
        position: absolute;
        bottom: 0;
        background-color: #FA541C;
        width: 100%;
        min-height: 40px;
        color: white;
        font-size: 14px;
        text-align: center;
        line-height: 40px;
    }
    .lm-tip >a{
        color: white;
        font-size: 14px;
        line-height: 14px;
    }
    .lm-loading {
        position: absolute;
        background-color: white;
        width: 100%;
        height: 100%;
        color: #3c3c3c;
        font-size: 14px;
        text-align: center;
        align-content: center;
        line-height: 100%;
        align-items: center;
        justify-content: center;
    }
    .lm-hide{
        display: none !important;
    }
  </style>
  </head>
  <body>
  <div>

  </div>
  <div id="login" class="flex flex-vertical flex-center-v">
    <div class="flex flex-horizontal flex-center-v title">
      <span>猎么插件 &nbsp;&nbsp;&nbsp;0.1.1 版</span>
    </div>
    <input type="text" placeholder="请输入账号" name="account">
    <input type="text" placeholder="请输入密码" name="password">
    <button id="btnLogin" style="margin: 12px 0;width: 50%;">登录</button>
  </div>
  <div id="logined" style="display: none;">
    <div class="flex flex-horizontal flex-center-v title">
      <span>猎么插件 &nbsp;&nbsp;&nbsp;0.1.1 版</span>
    </div>
    <div class="flex flex-vertical" style="border-bottom: 1px solid #9c9c9c;padding: 12px;">
      <div class="flex flex-horizontal flex-center-v">
        <span class="flex flex-1">您的库中无相同手机/邮箱的简历</span>
        <button>导入</button>
      </div>
      <div class="flex flex-horizontal flex-center-v">
        <span class="flex flex-1">您的库中相同手机/邮箱的简历</span>
        <button id="updateAll">更新</button>
      </div>
    </div>
    <div class="flex flex-vertical" style="padding: 12px;">
      <span class="sub-title">您的库中有2份相似简历</span>
      <div class="flex flex-horizontal flex-center-v item flex-pack-justify">
        <span>张三</span>
        <span>男</span>
        <span>大专</span>
        <span style="color: #9c9c9c;">2014年更新</span>
        <span style="color: red;">88%</span>
        <button id="updateItem" data-value="1">更新</button>
      </div>
      <div class="flex flex-horizontal flex-center-v item flex-pack-justify">
        <span>张三</span>
        <span>男</span>
        <span>大专</span>
        <span style="color: #9c9c9c;">2014年更新</span>
        <span style="color: red;">88%</span>
        <button id="updateAll">更新</button>
      </div>
      <div class="flex flex-horizontal flex-center-v item flex-pack-justify">
        <span>张三</span>
        <span>男</span>
        <span>大专</span>
        <span style="color: #9c9c9c;">2014年更新</span>
        <span style="color: red;">88%</span>
        <button id="updateAll">更新</button>
      </div>
      <div class="flex flex-horizontal flex-center-v item flex-pack-justify">
        <span>张三</span>
        <span>男</span>
        <span>大专</span>
        <span style="color: #9c9c9c;">2014年更新</span>
        <span style="color: red;">88%</span>
        <button id="updateAll">更新</button>
      </div>
    </div>
  </div>
  </body>
</html>
<script>
  (function injectedCodes() {
  window.addEventListener("message", function(e) {
    if (e.source != window || !e.data || !e.data.from || e.data.from != "jasinnetmessage") {
      return;
    }
    console.log("接受到消息：",e);
  }, false);
  window.sendMessageToSensorContent = function(msg) {
    msg = msg || {
      method: "",
      args: []
    };
    msg.method = msg.method || "noop";
    msg.args = msg.args || [];
    window.postMessage({
      from: "jasinnet#page",
      method: msg.method,
      args: msg.args
    }, "*");
  };
})()
</script>
